<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-1.11.3.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0
    }
    body{
        min-width: 1280px !important;
        max-width: 1920px;
        background-repeat: repeat;
    }
    /*上层轮播*/
    .home .top .swiper ul{
        list-style: none;
        margin: 0;
        position: relative;
        height: 698px;
    }
    .home .top .swiper ul li{
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity .5s ease-in-out;
        width: 100%;
    }
    .home .top .swiper ul li.active{
        opacity: 1;
    }
    .home .top .swiper ul li div{
        height: 698px;
    }
    .home .top .swiper ul li div.swiper1{
        background: url(./img/home/header-161228.jpg) center top no-repeat
    }
    .home .top .swiper ul li div.swiper2{
        background: url(./img/home/header-180402.jpg) center top no-repeat
    }
    /*新闻部分*/
    .home .news {
        background: url(./img/home/min-news.jpg) center top no-repeat;
        height: 310px;
    }

    .home .news .all{
        text-align: center;
        display: block;
    }

    .home .news .all .swiper{
        display: inline-block;
        vertical-align: top;
        height: 310px;
    }
    .home .news .all .swiper ul{
        margin-top: 37px;
        border: 2px solid #dea611;
    }
    .home .news .all .swiper ul li{
        display: none;
    }
    .home .news .all .swiper ul li.swipe{
        display: block;
        height: 100%;
    }

    .home .news .all .line{
        display: inline-block;
        align-items: center;
        margin: 0 25px;
        vertical-align: top;
        margin-top: 37px;
    }

    .home .news .all .new{
        display: inline-block;
        font-family:'Microsoft Yahei';
        vertical-align: center;
        position: relative;
        top: 25px;
        width: 430px;
    }
    .home .news .all .new dl dt{
        text-align: left;
        background: url(./img/home/line-2.png) left bottom no-repeat;
        margin-bottom: 15px
    }
    .home .news .all .new dl dt a{
        color: #caae53;
        text-decoration: none;
        font-size: 22px;
        line-height: 40px;
        font-weight: bold;
    }
    .home .news .all .new dl dd{
        text-align: left;
    }
    .home .news .all .new dl dd a{
        color: #caae53;
        font-size: 14px
    }
    .home .news .all .new dl dd span{
        display: block;
        text-align: right;
        color: #c9b77c;
        font-size: 14px
    }
    /*游戏详情*/
    .home .present{
        background: url(./img/home/bg-main.jpg) center top no-repeat
    }
    .home .present .title h3{
        font-size: 45px
    }
    .home .present .title h3 strong{
       background-image: -webkit-linear-gradient(top, #1e2f68 30%, #0f0811 70%);
       -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .home .present .title{
        width: 1200px;
        margin:0 auto;
        padding: 104px 0 0 70px
    }
    .home .present .title h3 small{
        font-family: 'Arial';
        font-size: 28px;
        font-weight: bold;
        font-style: italic;
        color: #333;
        background: none;
    }
    .home .present .pre-main1{
        height: 610px;
    }
    .home .present .pre-main1 .main1 p{
        padding: 100px 0 0;
        font-size: 18px;
        line-height: 2;
        text-align: center;
        color: #333;
    }
    .home .present .pre-main1 .main1 p span{
        color: #851111;
    }


    .home .present .pre-main2{
        height: 1152px;
    }
    .home .present .pre-main2 .main2 .servant{
        min-width: 1160px;
    }
    .home .present .pre-main2 .main2 .servant .title{
        width: 980px;
        margin: 0 auto;
        margin-top: 45px;
        padding-left: 45px;
        background: url('./img/servant/icon-title-big.png') left center no-repeat
    }
    .home .present .pre-main2 .main2 .servant .title h3{
        font-size: 45px;
        background-image: -webkit-linear-gradient(top, #1e2f68 30%, #0f0811 70%);
       -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .home .present .pre-main2 .main2 .servant .title p{
        font-size: 28px;
        color: #151834;
        min-height: 35px;
        background-image: -webkit-linear-gradient(top, #1e2f68 30%, #0f0811 70%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
    }
    .home .present .pre-main2 .main2 .servant .ser_class{
        width: 100%;
        height: 890px;
        margin: -50px 0  80px 0;
    }
    .home .present .pre-main2 .main2 .servant .ser_class ul{
        height: 890px;
        list-style: none;
        text-align: center;
        position: relative;
    }
    .home .present .pre-main2 .main2 .servant .ser_class ul li{
        width: 980px;
        display: block;
        margin: 0 auto;
        position: relative;
        opacity: 0;
        z-index: 0;
        transition: opacity .5s ease-in-out
    }
    .home .present .pre-main2 .main2 .servant .ser_class li img{
        position: absolute;
        top: 0;
        left: 0;

    }
    .home .present .pre-main2 .main2 .servant .ser_class li.show{
        z-index: 1;
        opacity: 1;
    }
    .home .present .pre-main2 .main2 .servant .ser_class>div{
        width: 980px;
        height: 0;
        margin: 0 auto;
        position: relative;
    }
    .home .present .pre-main2 .main2 .servant .ser_class>div>div{
        cursor: pointer;
    }
    .home .present .pre-main2 .main2 .servant .ser_class .right{
        width: 41px;
        height: 85px;
        background: url(./img/servant/path.png);
        position: relative;
        display: inline-block;
        left: -60px;
        top: -540px;
        z-index: 5;
    }
    .home .present .pre-main2 .main2 .servant .ser_class .left{
        position: relative;
        display: inline-block;
        width: 41px;
        height: 85px;
        background: url(./img/servant/path.png) center right;
        left: 100%;
        top: -540px;
        z-index: 5;
    }
    .home .present .pre-main2 .main2 .servant .scroll span:nth-child(3){
        cursor: pointer;
    }

    .home .present .pre-main2 .main2 .servant .scroll span:nth-child(5){
        cursor: pointer;
    }

    .home .present .pre-main2 .main2 .servant .scroll{
        box-sizing: content-box;
        width: 1200px;
        height: 105px;
        margin: 0 auto;
        background: url('./img/servant/role-span.png') no-repeat;
        overflow: hidden;
        padding-top: 40px;
        position: relative;
        top: -220px;
        left: 20px;
        z-index: 5;
    }
    .home .present .pre-main2 .main2 .servant .scroll>div{
        width: 2420px;
        float: left;
        position: relative;
        left: -255px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span{
        width: 240px;
        height: 70px;
        padding-right: 2px;
        float: left;
        display: block;
        background: url(./img/servant/role-name.png) no-repeat;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_1{
        background-position: -255px 0px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_1.show{
        background-position: 0px 0px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_2{
        background-position: -255px -70px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_2.show{
        background-position: 0px -70px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_3{
        background-position: -255px -140px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_3.show{
        background-position: 0px -140px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_4{
        background-position: -255px -210px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_4.show{
        background-position: 0px -210px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_5{
        background-position: -255px -280px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_5.show{
        background-position: 0px -280px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_6{
        background-position: -255px -350px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_6.show{
        background-position: 0px -350px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_7{
        background-position: -255px -420px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_7.show{
        background-position: 0px -420px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_8{
        background-position: -255px -490px;
    }
    .home .present .pre-main2 .main2 .servant .scroll span.ser_8.show{
        background-position: 0px -490px;
    }
    .home .present .pre-main2 .main2 .servant .scroll>div{
        position: relative;
    }
    .home .present .pre-main2 .main2 .servant .scroll>div:nth-child(1){
        position: relative;
        /* left: 0;
        transition: left .5s linear */
        /* animation: move 6s infinite linear */
    }

    /* @keyframes move{
        0%{
            left: 0;
        }
        5%{
            left: -255px;
        }
        99.9%{
            left:-255px
        }
        100%{
            left: 0px;
        }
    } */

    /* 两位从者显示切换效果 */
    .home .present .pre-main2 .main2 .servant .ser_class li img.show{
        z-index: 5;
    }



    .home .present .pre-main3{
        height: 670px;
    }
    .home .present .pre-main3 .main3 p{
        width: 1200px;
        margin:0 auto;
        padding: 30px 430px 0 30px;
        background: url(./img/home/main/cast/withmaps.jpg) right 65px no-repeat;
    }
    .home .present .pre-main3 .main3 p span{
        margin-right: 26px;
        font-size: 20px;
        line-height: 2.2;
        color: #333;
    }
    .home .present .pre-main3 .main3 p b{
        margin-right: 35px;
        display: block;
        text-align: right;
        font-weight: normal;
        font-size: 20px;
        line-height: 2.2;
    }

    .home .present .pre-main4{
        height: 1154px;
    }
    .home .present .pre-main4 .main4{
        margin:0 auto;
        width: 1200px;
    }
    .home .present .pre-main4 .main4 ul.left{
        vertical-align: top;
        display: inline-block;
        width: 70%;
        padding: 30px 0 0 60px;
        font-size: 24px;
    }
    .home .present .pre-main4 .main4 ul.left li{
        margin-bottom:20px; 
    }
    .home .present .pre-main4 .main4 ul.left li p{
        margin: 0;
        font-size: 30px;
        font-weight: bold;
    }
    .home .present .pre-main4 .main4 ul.left li span{
        display: inline-block;
        width: 125px;
        font-size: 16px;
        font-weight: normal;
    }
    .home .present .pre-main4 .main4 ul.right{
        vertical-align: top;
        display: inline-block;
        width: 29%;
        padding: 30px 0 0 60px;
        font-size: 24px;
    }
    .home .present .pre-main4 .main4 ul.right li p{
        margin: 0;
        font-size: 30px;
        font-weight: bold;
    }
    .home .present .pre-main4 .main4 ul.right li{
        margin-bottom:20px; 
    }
</style>
<body>
    <header>

    </header>
    <div class="home">
        <!-- 上层轮播 -->
        <div class="top">
            <div class="swiper">
                <ul>
                    <li><div class="swiper1"></div></li>
                    <li class="active"><div class="swiper2"></div></li>
                </ul>
            </div>
        </div>

		<!-- 新闻部分 -->
        <div class="news">
            <div class="all">
                <div class="swiper">
                    <ul>
                        <li class="swipe"><img src="./img/home/news/new1.jpg" alt=""></li>
                        <li><img src="./img/home/news/new2.jpg" alt=""></li>
                        <li><img src="./img/home/news/new3.jpg" alt=""></li>
                        <li><img src="./img/home/news/new4.jpg" alt=""></li>
                    </ul>
                </div>
                <div class="line">
                    <img src="./img/home/line-1.png" alt="">
                </div>
                <div class="new">
                    <dl>
                        <dt><a href="">最新情报</a></dt>
                        <dd>
                            <a href="">《FGO》手游随机抽取类玩法概率公示</a>
                            <span>[2017/05/31]</span>
                        </dd>
                        <dd>
                            <a href="">活动维护公告（2018年11月19日 14时）</a>
                            <span>[2018/11/16]</span>
                        </dd>
                        <dd>
                            <a href="">『幕间物语活动 第2弹』开放！</a>
                            <span>[2018/11/16]</span>
                        </dd>
                        <dd>
                            <a href="">剧场版「Fate/stay night [Heaven's Feel]」纪念活动</a>
                            <span>[2018/11/16]</span>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>

		<!-- 游戏详情 -->
        <div class="present">
            <div class="pre-main1">
                <div class="title">
                    <h3>
                        <strong>全新剧情</strong>
                        <small>New Story</small>
                    </h3>
                    <h5>超过100万字的故事脚本以7个章节来描述人类史上的7个时代</h5>
                </div>
                <div class="main1">
                    <p>
                        人类将于 <span>2016年灭绝---</span><br>
                        为什么？怎么会？是谁？做了什么？<br>
                        面对众多疑问，研究者们陷入了<span>疑惑</span>。就在这时，他们观测到了<span>新的异变</span>。<br>
                        <span>公元2004年</span>，日本某个地方都市，在这里，出现了前所未有的<span>[无法观测的领域]</span><br>
                        为了<span>保护</span>与<span>夺回</span>人类未来，必须进行时间旅行重返过去，<br>
                        执行与<span>“历史”</span>对抗的作战！
                    </p>
                </div>
            </div>
            <div class="pre-main2">
                <div class="title">
                    <h3>
                        <strong>从者信息</strong>
                    </h3>
                    <h5 style="font-family: 'Arial';">Servant</h5>
                </div>
                <div class="main2">
                    <div class="servant">
                        <div class="ser_class">
                            <ul>
                                <li class="ser_1"><img src="./img/servant/role-1.png" alt=""><img src="./img/servant/role-1-1.png" alt=""></li>
                                <li class="ser_2"><img src="./img/servant/role-2.png" alt=""><img src="./img/servant/role-2-2.png" alt=""></li>
                                <li class="ser_3"><img src="./img/servant/role-3.png" alt=""></li>
                                <li class="ser_4 show"><img src="./img/servant/role-4.png" alt=""></li>
                                <li class="ser_5"><img src="./img/servant/role-5.png" alt=""></li>
                                <li class="ser_6"><img src="./img/servant/role-6.png" alt=""></li>
                                <li class="ser_7"><img src="./img/servant/role-7.png" alt=""></li>
                                <li class="ser_8"><img src="./img/servant/role-8.png" alt=""></li>
                            </ul>
                            <div>
                                <div class="right"></div>
                                <div class="left"></div>
                            </div>
                        </div>
                        <div class="scroll">
                            <div>
                                <span class="ser_1"></span>
                                <span class="ser_2"></span>
                                <span class="ser_3"></span>
                                <span class="ser_4"></span>
                                <span class="ser_5"></span>
                                <span class="ser_6"></span>
                                <span class="ser_7"></span>
                                <span class="ser_8"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pre-main3">
                <div class="title">
                    <h3>
                        <strong>豪华声优阵容</strong>
                        <small>Cast</small>
                    </h3>
                </div>
                <div class="main3">
                    <p>
                        <span>浅川悠</span><span>阿部彬名</span><span>稲田徹</span><span>植田佳奈</span><span>江川央生</span><span>遠藤綾</span><span>大久保瑠美</span><br>
                        <span>大塚明夫</span><span>大原さやか</span><span>置鮎龍太郎</span><span>小倉唯</span><span>川澄綾子</span><span>神奈延年</span><br>
                        <span>子安武人</span><span>西前忠久</span><span>斎藤千和</span><span>坂本真綾</span><span>櫻井孝宏</span><span>沢城みゆき</span><br>
                        <span>下屋則子</span><span>島崎信長</span><span>鈴村健一</span><span>諏訪部順一</span><span>関智一</span><span>高乃麗</span><br>
                        <span>田中敦子</span><span>田中理恵</span><span>種田梨沙</span><span>丹下桜</span><span>鶴岡聡</span><span>寺島拓篤</span><span>鳥海浩輔</span><br>
                        <span>中井和哉</span><span>中村悠一</span><span>浪川大輔</span><span>能登麻美子</span><span>野中藍</span><span>早見沙織</span><br>
                        <span>三木眞一郎</span><span>水島大宙</span><span>緑川光</span><span>宮野真守</span><span>安井邦彦</span><span>遊佐浩二</span><br>
                        <b>(按日语50音順)</b>
                    </p> 
                </div>
            </div>
            <div class="pre-main4">
                <div class="title">
                    <h3>
                        <strong>制作组</strong>
                        <small>Staff</small>
                    </h3>
                </div>
                <div class="main4">
                    <ul class="left">
                        <li>剧本撰写&剧本监修<br>
                           <p>奈须 蘑菇</p>
                        </li>
                        <li>人设&美术总监<br>
                            <p>武内 崇</p>
                        </li>
                        <li>剧本撰写<br>
                            <p>东出 佑一郎</p>
                            <p>樱井 光</p>
                        </li>
                        <li>参加插画家<br>
                            <span>I-IV</span><span>アインクロス</span><span>蒼月タカオ</span><span>AKIRA</span><span>Azusa</span><br>
                            <span>石田あきら</span><span>岡崎武士</span><span>okojo</span><span>ギンカ</span><span>近衛乙嗣</span><br>
                            <span>こやまひろかず</span><span>坂本みねぢ</span><span>佐々木少年</span><span>縞うどん</span><span>しまどりる</span><br>
                            <span>下越</span><span>しらび</span><span>真じろう</span><span>タイキ</span><span>高橋慶太郎</span> <br>
                            <span>高山箕犀</span><span>たけのこ星人</span><span>タスクオーナ</span><span>danciao</span><span>中央東口</span> <br>
                            <span>天空すふぃあ</span><span>中原</span><span>なまにくATK</span><span>pako</span><span>Bすけ</span> <br>
                            <span>左</span><span>広江礼威</span><span>ひろやまひろし</span><span>PFALZ</span><span>ネコタワ</span><br>
                            <span>huke</span><span>BLACK</span><span>BUNBUN</span><span>前田浩孝</span><span>また</span> <br>
                            <span>松竜</span><span>三輪士郎</span><span>森井しづき</span><span>森山大輔</span><span>山中虎鉄</span> <br>
                            <span>本庄雷太</span><span>Ryota-H</span><span>輪くすさが </span><span>ワダアルコ</span><span>（50音順）</span><br>
                        </li>
                    </ul>
                    <ul class="right">
                        <li>开发<br>
                            <p>DELiGHTWORKS</p>
                        </li>
                        <li>开场动画
                            <p>制作：A-1 Pictures</p>   
                            <p>监督：中村 亮介</p>
                            <p>人设：细居 美惠子</p>
                        </li>
                        <li>主体歌
                            <p>坂本 真绫 「色彩」</p><br>
                            <p><img src="./img/home/main/staff/musicname.jpg" alt=""></p>
                        </li>
                    </ul> 
                </div>
            </div>
        </div>

    </div>
    <footer></footer>
</body>
<script>
    // 上层轮播效果
    setInterval(function(){
        // $(".home .swiper ul li.active").removeClass("active").siblings().addClass("active")
        if($(".home .top .swiper ul li.active").is($(".home .top .swiper ul li:last"))){
            $(".home .top .swiper ul li.active").removeClass("active")
            $(".home .top .swiper ul li:first").addClass("active")
        }
        else{
            $(".home .top .swiper ul li.active").removeClass("active").next().addClass("active")
        }
    },5000)


    // 新闻页轮播效果
    setInterval(function(){
        if($(".home .news .all .swiper ul li.swipe").is($(".home .news .all .swiper ul li:last"))){
            $(".home .news .all .swiper ul li.swipe").removeClass("swipe")
            $(".home .news .all .swiper ul li:first").addClass("swipe")
        }
        else{
            $(".home .news .all .swiper ul li.swipe").removeClass("swipe").next().addClass("swipe")
        }
    },3000)

    // 多从者显示切换
    var x=0
    $('.servant .ser_class li img:nth-child(1)').addClass("show")
    $('.servant .ser_class li').mousemove(function(e){
        x = e.offsetX
        if(x>500){
            $('.servant .ser_class li img:nth-child(2)').addClass("show").siblings().removeClass("show")
        }else{
            $('.servant .ser_class li img:nth-child(1)').addClass("show").siblings().removeClass("show")
        }
    })
    // Servant轮播
    $('.servant .scroll>div>span:nth-child(4)').addClass("show")
        
    $('.servant .ser_class .left').click(function(){
        clearInterval(myTime)
        var i=left()
        if(i==1){
            myTime = setInterval(function(){left()},6000)
        }
    })

    $('.servant .ser_class .right').click(function(){
        clearInterval(myTime)
        var i=right()
        if(i==1){
            myTime = setInterval(function(){left()},6000)
        }
    })

    $('.servant .scroll>div').click(function(e){
        if($(e.target)[0]==$(".servant .scroll span:nth-child(5)")[0]){
            clearInterval(myTime)
            var i=left()
            if(i==1){
                myTime = setInterval(function(){left()},6000)
            }
        }
        if($(e.target)[0]==$(".servant .scroll span:nth-child(3)")[0]){
            clearInterval(myTime)
            var i=right()
            if(i==1){
                myTime = setInterval(function(){left()},6000)
            }
        }
        // else{
        //     var str = $(e.target)
        //     console.log(str,$(".servant .scroll span:nth-child(4)"))
        // }
    })

    var myTime=setInterval(function(){left()},6000)
        
    var left = function(){
        $('.servant .scroll>div').animate({left:'-510px'},500,function(){
            $('.servant .scroll>div').css('left','-255px')
        })
        $('.servant .scroll>div').append($('.servant .scroll>div>span:nth-child(1)'))
        $('.servant .scroll>div>span:nth-child(4)').addClass("show").siblings().removeClass("show")
        var str  = $('.servant .scroll>div>span:nth-child(4)').attr("class")
        var ser  = str.slice(0,5)
        $(`.servant .ser_class ul li.${ser}`).addClass("show").siblings().removeClass("show")

        return 1
    }

    var right = function(){
        $('.servant .scroll>div').prepend($('.servant .scroll>div>span:last-child'))
        $('.servant .scroll>div>span:nth-child(4)').addClass("show").siblings().removeClass("show")
        var str  = $('.servant .scroll>div>span:nth-child(4)').attr("class")
        var ser  = str.slice(0,5)
        $(`.servant .ser_class ul li.${ser}`).addClass("show").siblings().removeClass("show")

        $('.servant .scroll>div').animate({left:'0px'},500,function(){
            $('.servant .scroll>div').css('left','-255px')
        })

        return 1
    }

</script>
</html>